<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>订单管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-spin :spinning="spinning">
      <div class="pageTabsWhole" style="margin-top:24px;">
        <a-tabs
          default-active-key
          :tabBarStyle="{margin:0}"
          :tabBarGutter="16"
          :animated="false"
          @change="tabChange"
          class="table_tab"
        >
          <a-tab-pane key tab="全部"></a-tab-pane>
          <a-tab-pane :key="1" tab="进行中"></a-tab-pane>
          <a-tab-pane :key="2" tab="已完成"></a-tab-pane>
          <a-tab-pane :key="4" tab="已结算"></a-tab-pane>
          <!-- <a-tab-pane :key="3" tab="已作废"></a-tab-pane> -->
        </a-tabs>
      </div>
      <div class="pageContentWhole">
        <a-row>
          <a-col :span="24">
            <a-form layout="inline">
              <a-form-item label="客户名称">
                <a-input v-model="form.custNameLike" class="selectInputWidth" />
              </a-form-item>
              <a-form-item label="公司编号/运单号/箱号/封号">
                <a-input v-model="form.codeLike" class="selectInputWidth" />
              </a-form-item>
              <a-form-item label="订单类型">
                <a-select v-model="form.orderType" style="width:150px">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option value="DOMESTIC_TRADE_EXPORTS">内贸出口订单</a-select-option>
                  <a-select-option value="DOMESTIC_TRADE_IMPORTS">内贸进口订单</a-select-option>
                  <a-select-option value="FOREIGN_TRADE_EXPORTS">外贸出口订单</a-select-option>
                  <a-select-option value="FOREIGN_TRADE_IMPORTS">外贸进口订单</a-select-option>
                  <a-select-option value="UNITED_TRANSPORT_EXPORTS">联运出口订单</a-select-option>
                  <a-select-option value="UNITED_TRANSPORT_IMPORTS">联运进口订单</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="运输条款">
                <a-select v-model="form.transportTerms" style="width:120px">
                  <a-select-option value>全部</a-select-option>
                  <a-select-option value="DO-DO">门到门</a-select-option>
                  <a-select-option value="DO-CY">门到港</a-select-option>
                  <a-select-option value="CY-DO">港到门</a-select-option>
                  <a-select-option value="CY-CY">港到港</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="结算类型">
                <a-select v-model="form.settlementType" style="width:120px">
                  <a-select-option value>全部</a-select-option>
                  <!-- <a-select-option :value="2">月结</a-select-option>
                  <a-select-option :value="1">票结</a-select-option>-->
                  <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="所属部门">
                <a-tree-select
                  class="selectInputWidth"
                  v-model="form.deptId"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :load-data="onLoadData"
                  :tree-data="deptTreeData"
                  placeholder="请选择"
                  @change="onChangeTree"
                ></a-tree-select>
              </a-form-item>
              <a-form-item label="所属销售">
                <a-select v-model="form.sellerId" class="selectInputWidth">
                  <a-select-option v-for="v in sellers" :key="v.uiId">{{v.name}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="起运港">
                <a-input v-model="form.startPortLike" class="selectInputWidth" />
              </a-form-item>
              <a-form-item label="目的港">
                <a-input v-model="form.endPortLike" class="selectInputWidth" />
              </a-form-item>
              <a-form-item>
                <a-input-group compact>
                  <a-select v-model="form.dateSearchType" style="width:110px">
                    <a-select-option value="1">创建时间</a-select-option>
                    <a-select-option value="2">装货时间</a-select-option>
                    <a-select-option value="3">完成时间</a-select-option>
                  </a-select>
                  <a-range-picker
                    v-if="form.dateSearchType === '2'"
                    @change="onChange"
                    :show-time="{ format: 'HH:mm' }"
                    format="YYYY-MM-DD HH:mm"
                    style="width:300px"
                    :value="createValue"
                  >
                    <a-icon slot="suffixIcon" type="calendar" />
                  </a-range-picker>
                  <a-range-picker
                    v-else
                    @change="onChange"
                    :value="createValue"
                    style="width:300px"
                  >
                    <a-icon slot="suffixIcon" type="calendar" />
                  </a-range-picker>
                </a-input-group>
              </a-form-item>
              <a-form-item label="操作员" prop="handlerId">
                <a-select v-model="form.handlerId" class="selectInputWidth">
                  <a-select-option value>请选择操作员</a-select-option>
                  <a-select-option
                    v-for="(item,index) in handlerList"
                    :key="index"
                    :value="item.uiId"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="check">查询</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
      <!-- 订单审核列表 -->
      <a-row class="orderItem ordertem_de" v-if="listData.length > 0">
        <a-col :span="24">
          <div v-for="(v, index) in listData" :key="index" class="orderList">
            <a-card size="small">
              <template slot="title">
                <a-descriptions :column="5" class="titleCard" style="padding-left:24px;">
                  <a-descriptions-item label="公司编号">{{v.shipOrderCode}}</a-descriptions-item>
                  <a-descriptions-item label="结算类型">{{checkSettlementTypeName(v.settlementType)}}</a-descriptions-item>
                  <a-descriptions-item label="创建日期">{{v.createTime}}</a-descriptions-item>
                  <a-descriptions-item label="所属销售">{{v.seller}}</a-descriptions-item>
                  <a-descriptions-item label="操作员">{{v.handler}}</a-descriptions-item>
                </a-descriptions>
              </template>
              <div class="order_detail">
                <a-descriptions :column="4" size="small">
                  <a-descriptions-item label="客户名称">
                    <a-tooltip placement="top" style="cursor:pointer">
                      <template slot="title">
                        <span>{{v.custName}}</span>
                      </template>
                      {{v.custName}}
                    </a-tooltip>
                  </a-descriptions-item>
                  <template>
                    <a-descriptions-item v-if="v.transportTerms=== 'DO-DO'" label="运输条款">门到门</a-descriptions-item>
                    <a-descriptions-item v-else-if="v.transportTerms=== 'DO-CY'" label="运输条款">门到港</a-descriptions-item>
                    <a-descriptions-item v-else-if="v.transportTerms=== 'CY-DO'" label="运输条款">港到门</a-descriptions-item>
                    <a-descriptions-item v-else-if="v.transportTerms=== 'CY-CY'" label="运输条款">港到港</a-descriptions-item>
                  </template>
                  <a-descriptions-item label="箱型箱量">{{v.containerType}}*{{v.containerNum}}</a-descriptions-item>
                  <a-descriptions-item
                    label="起运/目的港"
                  >{{v.startPortName||'--'}} / {{v.endPortName||'--'}}</a-descriptions-item>

                  <template>
                    <a-descriptions-item
                      v-if="v.orderType === 'DOMESTIC_TRADE_EXPORTS'"
                      label="订单类型"
                    >内贸出口订单</a-descriptions-item>
                    <a-descriptions-item
                      v-else-if="v.orderType === 'DOMESTIC_TRADE_IMPORTS'"
                      label="订单类型"
                    >内贸进口订单</a-descriptions-item>
                    <a-descriptions-item
                      v-else-if="v.orderType === 'FOREIGN_TRADE_EXPORTS'"
                      label="订单类型"
                    >外贸出口订单</a-descriptions-item>
                    <a-descriptions-item
                      v-else-if="v.orderType === 'FOREIGN_TRADE_IMPORTS'"
                      label="订单类型"
                    >外贸进口订单</a-descriptions-item>
                    <a-descriptions-item
                      v-else-if="v.orderType === 'UNITED_TRANSPORT_EXPORTS'"
                      label="订单类型"
                    >联运出口订单</a-descriptions-item>
                    <a-descriptions-item
                      v-else-if="v.orderType === 'UNITED_TRANSPORT_IMPORTS'"
                      label="订单类型"
                    >联运进口订单</a-descriptions-item>
                  </template>
                  <a-descriptions-item label="箱号">{{v.containerNo || '--'}}</a-descriptions-item>
                  <a-descriptions-item label="货名">{{v.goodsName}}</a-descriptions-item>
                  <a-descriptions-item label="装货时间">{{v.loadingTime}}</a-descriptions-item>
                  <!-- <a-descriptions-item label="操作员">{{v.handler}}</a-descriptions-item> -->
                </a-descriptions>
              </div>
            </a-card>
            <a-card size="small" style="border-top:none" class="order_czuo">
              <template slot="title">
                <a-descriptions :column="12" class="titleCard">
                  <template>
                    <a-descriptions-item v-if="v.status === 1" :span="2">
                      <a-badge color="#7CB305" text="进行中" />
                    </a-descriptions-item>
                    <a-descriptions-item v-else-if="v.status === 2" :span="2">
                      <a-badge color="#474747" text="已完成" />
                    </a-descriptions-item>
                    <a-descriptions-item v-else-if="v.status === 3" :span="2">
                      <a-badge color="#474747" text="已完成-异常" />
                    </a-descriptions-item>
                    <a-descriptions-item v-else-if="v.status === 4" :span="2">
                      <a-badge color="#FAAD14" text="已结算" />
                    </a-descriptions-item>
                    <a-descriptions-item v-else-if="v.status === 5" :span="2">
                      <a-badge color="#CF1322" text="已作废" />
                    </a-descriptions-item>
                  </template>
                </a-descriptions>
              </template>
              <a-button
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="changeOrder(v)"
              >申请改单</a-button>
              <!-- <a-button
                v-if="v.status === 2 || v.status === 3"
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="showModal(v)"
              >货物跟踪码</a-button>
              <a-button
                v-if="v.status === 4"
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="editOrder(v)"
              >重新编辑</a-button>
              <a-button
                v-if="v.status === 2 || v.status === 3"
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="queryContainer(v)"
              >明细</a-button>
              <a-button
                v-if="v.status === 4"
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="delOrder(v)"
              >删除</a-button>-->
              <a-button
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="orderDetail(v)"
              >详情</a-button>
            </a-card>
          </div>
          <p class="orderPagination">
            <a-pagination
              show-size-changer
              :current="pagination.current"
              :total="pagination.total"
              :page-size-options="['10', '30', '50', '100', '500']"
              :showTotal="pagination.showTotal"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </p>
        </a-col>
      </a-row>
      <a-empty v-else />
    </a-spin>
    <a-modal
      v-model="containerVisible"
      title="集装箱明细"
      :body-style="{padding:'0 24px 24px 24px'}"
      :width="1000"
      centered
      :footer="null"
      destroyOnClose
    >
      <a-table
        :loading="containerLoading"
        :columns="containerColumns"
        :data-source="containerData"
        class="tableMargin"
        :pagination="containerPagination"
        :row-key="(record,index) => index"
      >
        <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
        <template slot="status" slot-scope="record">
          <span v-if="record.status === 1">进行中</span>
          <span v-else-if="record.status === 2">已完成</span>
          <span v-else-if="record.status === 3">已完成-异常</span>
          <span v-else-if="record.status === 4">已结算</span>
          <span v-else-if="record.status === 5">已作废</span>
          <span v-else>--</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal v-model="visible" title="货物跟踪码" :width="400" centered :footer="null" destroyOnClose>
      <div ref="imageWrapper" style="overflow:visible !important">
        <div class="main">
          <div class="logo">
            <img src="@@/images/liut_logo.png" alt class="img" />
            <h1>{{orderInfo.custName}}</h1>
          </div>
          <div class="c_information">
            <ul>
              <li>
                <p>
                  <span>箱型箱量：</span>
                  {{orderInfo.containerType}}*{{orderInfo.containerNum}}
                </p>
              </li>
              <li>
                <p>
                  <span>货名：</span>
                  {{orderInfo.goodsName}}
                </p>
              </li>
            </ul>
          </div>
          <div class="c_address">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td valign="middle" class="fh_sh" width="45px;">发货</td>
                  <td class="add add1">
                    <h1>
                      <span>{{orderInfo.consignor}}</span>
                      {{orderInfo.consignorPhone}}
                    </h1>
                    <h2>
                      <span>{{orderInfo.startPortName}}</span>
                      <template
                        v-if="orderInfo.transportTerms === 'CY-CY' || orderInfo.transportTerms === 'DO-CY'"
                      >{{orderInfo.consigneeTitle}}</template>
                      <template
                        v-else
                      >{{orderInfo.consignorProvince}} {{orderInfo.consignorCity}} {{orderInfo.consignorArea}} | {{orderInfo.consignorAddress}}</template>
                    </h2>
                  </td>
                </tr>
                <tr>
                  <td class="fh_sh fh_sh1">收货</td>
                  <td class="add">
                    <h1>
                      <span>{{orderInfo.consignee}}</span>
                      {{orderInfo.consigneePhone}}
                    </h1>
                    <h2>
                      <span>{{orderInfo.endPortName}}</span>
                      {{orderInfo.consigneeProvince}} {{orderInfo.consigneeCity}} {{orderInfo.consigneeArea}} | {{orderInfo.consigneeAddress}}
                    </h2>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="c_code">
            <div id="qrcode" ref="qrcode" class="erw_hwgz"></div>
            <h1>货物跟踪码</h1>
            <p>扫码后查看您的货物运输动态</p>
          </div>
          <div class="c_people">
            <ul>
              <li>
                <img src="@@/images/xs@2x.png" alt />
                <span>客户经理：</span>
                {{orderInfo.seller}}
              </li>
              <li>
                <img src="@@/images/dh@2x.png" alt />
                <span>联系电话：</span>
                {{orderInfo.sellerPhone}}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <a-button block type="primary" @click="downLoadImg">点击下载</a-button>
    </a-modal>
  </div>
</template>

<script>
import {mixin} from '@/common/common'
import { TRUCKINGURL } from '@/common/config'
import { querySellerDown, queryDeptDown } from '@/api'
import {
  salesCenterQueryShipOrderList,
  delOrderInfo,
  getOrderInfoById
} from '@/api/salesCenter'
import { queryShipOrderList } from '@/api/orderCenter'
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
const deptData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL'
}
const sellerData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL',
  status: 1
}
const containerColumns = [
  {
    title: '序号',
    width: 60,
    scopedSlots: { customRender: 'rn' }
  },
  {
    title: '公司编号',
    width: 150,
    dataIndex: 'shipOrderCode',
    customRender: (text, record, index) => {
      return record.shipOrderCode || '--'
    }
  },
  {
    title: '运单号',
    dataIndex: 'seagoingShipOrderCode',
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo',
    customRender: (text, record, index) => {
      return record.containerNo || '--'
    }
  },
  {
    title: '箱封号',
    customRender: record => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '箱型',
    dataIndex: 'containerType',
    customRender: (text, record, index) => {
      return record.containerType || '--'
    }
  },
  {
    title: '货名',
    dataIndex: 'goodsName',
    customRender: (text, record, index) => {
      return record.goodsName || '--'
    }
  },
  {
    title: '货重（吨）',
    customRender: record => {
      return record.goodsWeight || '--'
    }
  },
  {
    title: '状态',
    scopedSlots: {
      customRender: 'status'
    }
  }
]
const defaultForm = () => ({
  deptId: '', // 所属部门id
  sellerId: '', // 销售id
  handlerId: '', // 操作员id
  status: '', // 状态：1待审核，2进行中，3已完成，4审核不通过
  custNameLike: '', // 客户名称
  codeLike: '', // 公司编号
  orderType: '', // 订单类型
  transportTerms: '', // 运输条款 DO-CY 门到港 以此类推
  settlementType: '', // 结算方式：1票结，2月结
  startPortLike: '', // 起运港
  endPortLike: '', // 目的港
  dateSearchType: '1', // 1、创建时间 2、装货时间 3.完成时间
  startDate: '', // 开始时间
  endDate: '' // 结束时间
})
export default {
  mixins: [mixin],
  data () {
    return {
      handlerList: [],
      form: {
        ...defaultForm()
      },
      createValue: [],
      spinning: false,
      // 订单card start
      listData: [],
      columns: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pagination: {},
      orderInfoId: '',
      containerColumns,
      containerVisible: false,
      containerData: [],
      containerLoading: true,
      containerPagination: {},
      containerPageNum: 1,
      containerPageSize: 10,
      visible: false,
      orderInfo: {},
      deptTreeData: [],
      sellers: [],
      isFirstEnd: true,
      btnControl: {}
    }
  },
  methods: {
    // 操作员列表
    handlerListRequest (e) {
      querySellerDown(e)
        .then(res => {
          this.handlerList = res.data
        })
        .catch(rs => {})
    },
    orderListRequest (e) {
      this.spinning = true
      salesCenterQueryShipOrderList(e)
        .then(res => {
          // // console.log(res.data)
          this.listData = res.data.list
          this.pagination = this.getPagination(res.data)
          // let { pageNum, pageSize, total, pages } = res.data
          // this.pagination = { pageNum, pageSize, total, pages }
          this.isFirstEnd = false
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
        .catch(rs => {})
    },
    delOrderRequest (e) {
      delOrderInfo(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.orderListRequest({
              ...this.form,
              pageNum: this.pageNum,
              pageSize: this.pageSize
            })
          }
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      this.containerLoading = true
      queryShipOrderList(e)
        .then(res => {
          this.containerData = res.data.list
          let currentPage = this.containerPageNum
          this.containerPagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.containerPageNum = pageNum
              let paramData = {
                pageSize: this.containerPageSize,
                pageNum: this.containerPageNum,
                orderInfoId: this.orderInfoId
              }
              this.containerListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.containerPageNum = current
              this.containerPageSize = size
              let paramData = {
                pageSize: this.containerPageSize,
                pageNum: this.containerPageNum,
                orderInfoId: this.orderInfoId
              }
              this.containerListRequest(paramData)
            }
          }
          this.containerLoading = false
        })
        .catch(rs => {})
    },
    orderInfRequest (e) {
      getOrderInfoById(e)
        .then(res => {
          // console.log(res.data)
          this.orderInfo = res.data
        })
        .catch(rs => {})
    },
    tabChange (key) {
      this.pageNum = 1
      // this.pageSize = 10
      this.form.status = key
      this.createValue = []
      this.form.handlerId = ''
      this.form.custNameLike = ''
      this.form.codeLike = ''
      this.form.orderType = ''
      this.form.transportTerms = ''
      this.form.settlementType = ''
      this.form.startPortLike = ''
      this.form.endPortLike = ''
      this.form.dateSearchType = '1'
      this.form.startDate = ''
      this.form.endDate = ''
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      // setTimeout(() => {
      //   Object.assign(this.form, defaultForm())
      // }, 1)
    },
    onShowSizeChange (current, size) {
      this.pageNum = current
      this.pageSize = size
      this.handleSubmit()
    },
    paginationOnChange (pageNum) {
      this.pageNum = pageNum
      this.handleSubmit()
    },
    onChange (date, dateString) {
      this.createValue = date
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      // this.pageSize = 10
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleSubmit () {
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    delOrder (e) {
      if (!this.btnControl.drop) {
        this.$message.error('您无此权限！')
        return false
      }
      let _s = this
      _s.$confirm({
        title: '删除订单后将无法找回，确认删除？',
        onOk () {
          _s.delOrderRequest({
            id: e.id
          })
        }
      })
    },
    queryContainer (e) {
      this.orderInfoId = e.id
      this.containerListRequest({
        orderInfoId: e.id,
        pageNum: this.containerPageNum,
        pageSize: this.containerPageSize
      })
      this.containerVisible = true
    },
    orderDetail (e) {
      this.$router.push({ path: `/salesCenter/salesOrder/detail/${e.id}` })
    },
    editOrder (e) {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.$router.push({ path: `/salesCenter/salesOrder/edit/${e.id}` })
    },
    showModal (e) {
      let _s = this
      _s.orderInfRequest({ id: e.id })
      _s.visible = true
      setTimeout(() => {
        _s.$nextTick(() => {
          _s.qrcode(e.id)
        })
      }, 200)
    },
    async downLoadImg () {
      let _s = this
      // 滚轮滑动造成的，主要是html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题(大概意思就是有滚动条时造成的) 解决方案：(在生成截图前，先把滚动条置顶)
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      let opts = {
        x: _s.$refs.imageWrapper.getBoundingClientRect().left + 0, // 绘制的dom元素相对于视口的位置，由于获取的位置比原本往前偏离的所以要加上，你需要根据自己的视图去计算
        y: _s.$refs.imageWrapper.getBoundingClientRect().top, // top没有偏离所以不用修改
        // backgroundColor: null, // 解决生成的图片有白边，只单单加和这个并没有效果
        width: _s.$refs.imageWrapper.offsetWidth - 0, // 因为多出的需要剪裁掉，
        height: _s.$refs.imageWrapper.offsetHeight,
        useCORS: true,
        scale: 3, // 因为生成图片会模糊，但是这个会使下载的图片变大，可以使用base64压缩
        dpi: window.devicePixelRatio // z
      }
      await html2canvas(_s.$refs.imageWrapper, opts).then(canvas => {
        let link = document.createElement('a')
        link.href = canvas.toDataURL() // 下载链接
        link.setAttribute('download', `二维码${Math.random()}.png`)
        link.style.display = 'none' // a标签隐藏
        document.body.appendChild(link)
        link.click()
      })
    },
    qrcode (id) {
      // console.log(id)
      // eslint-disable-next-line no-unused-vars
      let qrcode = new QRCode('qrcode', {
        width: 200, // 二维码宽度，单位像素
        height: 200, // 二维码高度，单位像素
        text: `${TRUCKINGURL}?id=${id}`
      })
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          rsp => {
            let childrenData = []
            rsp.data.forEach(value => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      // queryDeptDown(e).then(rsp => {
      //   let initData = []
      //   rsp.data.forEach((value, index) => {
      //     initData.push({
      //       title: value.name,
      //       key: value.deptId,
      //       value: value.deptId
      //     })
      //   })
      //   this.deptTreeData = initData
      //   this.form.deptId = rsp.data[0].deptId
      // })
      return new Promise(resolve => {
        queryDeptDown(e).then(rsp => {
          let initData = []
          rsp.data.forEach((value, index) => {
            initData.push({
              title: value.name,
              key: value.deptId,
              value: value.deptId
            })
          })
          this.deptTreeData = initData
          this.form.deptId = rsp.data[0].deptId
          if (this.isFirstEnd) {
            resolve(this.form.deptId)
          }
        })
      })
    },
    onChangeTree (value) {
      this.initSellerDown(value)
    },
    initSellerDown (deptId) {
      return new Promise(resolve => {
        querySellerDown({ ...sellerData, deptId }).then(rsp => {
          this.sellers = rsp.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
          this.form.sellerId = rsp.data[0].uiId
          if (this.isFirstEnd) {
            resolve(this.form.sellerId)
            // // console.log(rsp.data[0].uiId)
          }
        })
      })
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    },
    changeOrder (e) {
      if (!this.btnControl.applyChangeOrder) {
        this.$message.error('您无此权限！')
        return false
      }
      this.$router.push({ path: `/salesCenter/salesOrder/change/${e.id}` })
    }
  },
  created () {
    this.pagination = this.getPagination()
    Promise.all([this.initDept(deptData), this.initSellerDown()])
      .then(result => {
        // // console.log(result)
        this.orderListRequest({
          deptId: result[0],
          sellerId: result[1],
          dateSearchType: '1',
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
      })
      .catch(() => {
        // console.log(error)
      })
    // 操作员
    this.handlerListRequest({
      type: 2,
      dataRole: 'CONTAINER_OPR',
      status: 1
    })
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
  }
}
</script>

<style scoped>
.top {
  width: auto;
  background: #ffffff;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
  padding: 0;
  color: #333;
  margin: 0;
  width: 100%;
  border-bottom: 1px #e0e0e0 solid;
  position: relative;
}
.top_fh {
  position: absolute;
  left: 3%;
  height: 15px;
  margin-top: 15px;
}

.logo {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.logo img {
  width: 118px;
  margin-top: 30px;
}
.logo h1 {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding-bottom: 15px;
}

.c_information {
  width: 94%;
  margin: 0 3% 0 3%;
  overflow: hidden;
  padding-bottom: 15px;
}
.c_information h1 {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  padding: 15px 0;
}
.c_information h1 img {
  width: 20px;
  float: left;
  margin-right: 6px;
}
.c_information ul {
  clear: both;
  width: 100%;
}
.c_information ul li {
  width: 50%;
  float: left;
  color: #333;
  font-size: 14px;
}
.c_information ul li p {
  width: 99.9%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.c_information ul li p span {
  color: #999;
}

.c_address {
  width: 97%;
  margin-left: 3%;
  margin-bottom: 10px;
}
.c_address table {
  border-collapse: collapse;
  width: 100%;
  background: url(../../../static/images/form@2x.png) no-repeat 10px center;
  background-size: 12px 16px;
}
.c_address table tr td {
  padding: 12px 0;
}
.c_address table tr .fh_sh {
  width: 46px;
  padding-right: 13px;
  text-align: center;
  font-size: 12px;
  background: url(../../../static/images/for1@2x.png) no-repeat left;
  background-size: 32px 37.5px;
  color: #fff;
  line-height: 21px;
}
.c_address table tr .fh_sh1 {
  background: url(../../../static/images/to1@2x.png) no-repeat left;
  background-size: 32px 37.5px;
}
.c_address table tr .add h1 {
  font-size: 14px;
  color: #333;
  line-height: 20px;
  height: 20px;
  margin-bottom: 8px;
  margin-right: 3%;
}
.c_address table tr .add h1 span {
  display: block;
  width: 30%;
  padding-right: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
  float: left;
}

.c_address table tr .add h2 {
  font-size: 14px;
  color: #999;
  line-height: 20px;
  margin-right: 3%;
}
.c_address table tr .add h2 span {
  display: block;
  width: 30%;
  padding-right: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333;
  font-weight: bold;
  line-height: 20px;
  float: left;
}

.c_code {
  text-align: center;
  width: 94%;
  margin: 0 3%;
  border-bottom: 1px dashed #ededed;
  border-top: 1px dashed #ededed;
  padding: 20px 0 5px 0;
}
.erw_hwgz {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}
.c_code h1 {
  margin-top: 210px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.c_code p {
  font-size: 12px;
  color: #999;
}

.c_people {
  width: 94%;
  margin: 0 3%;
  padding: 15px 0;
}
.c_people ul li {
  line-height: 22px;
  font-size: 14px;
  color: #333;
}
.c_people ul li img {
  width: 12px;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
}
.c_people ul li span {
  color: #999;
}

.kong {
  width: 100%;
  height: 10px;
  background: #f2f2f2;
}

.Case {
  width: 97%;
  margin-left: 3%;
  margin-bottom: 32px;
}
.Case ul li {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px #ededed solid;
  padding-right: 3%;
}
.Case ul li .img1 {
  width: 16px;
  float: left;
  margin-top: 16px;
  margin-right: 10px;
}
.Case ul li span {
  float: right;
  color: #999;
}
.Case ul li span img {
  height: 13px;
  float: right;
  margin-top: 17.5px;
  margin-left: 10px;
}

.service {
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: #666;
  height: 32px;
  line-height: 32px;
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 88;
}
.service font {
  color: #1890ff;
}

.wl_xz {
  width: 94%;
  padding: 15px 3%;
}
.wl_xz img {
  width: 30px;
  float: left;
  margin-right: 10px;
}
.wl_xz h1 {
  font-size: 14px;
  color: #333;
}
.wl_xz h1 span {
  float: right;
  color: #999;
}
.wl_xz h2 {
  font-size: 12px;
  color: #999;
  padding-top: 5px;
}
.wl_xz h2 span {
  font-size: 16px;
  color: #333;
  float: right;
}

/*跟踪*/
.dp_ddgz {
  widows: 94%;
  padding: 15px 3%;
}
.dp_ddgz dl dt {
  font-size: 12px;
  float: left;
  text-align: right;
  color: #1890ff;
}
.dp_ddgz dl dd {
  margin-left: 66px;
  background: url(../../../static/images/liu2.png) no-repeat left top;
  min-height: 55px;
  padding-left: 25px;
  padding-bottom: 10px;
}
.dp_ddgz dl dd h1 {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
}
.dp_ddgz dl dd p {
  margin-top: 2px;
  font-size: 12px;
  color: #999;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  word-wrap: break-word;
}

.dp_ddgz .dp_ddgz_t {
  background: url(../../../static/images/liu1.png) no-repeat left top;
}
.dp_ddgz .dp_ddgz_b {
  background: url(../../../static/images/liu3.png) no-repeat left top;
}

.dp_ddgz .dp_ddgz_t2 {
  background: url(../../../static/images/liu0.png) no-repeat left top;
}
</style>
